<template>
  <the-table
    id="balance-table"
    ref="table"
    :columns="columns"
    uri="s/balances"
    :slots="['balance']"
  >
    <span
      slot="balance"
      slot-scope="{ row }"
      :class="row.value > 0 ? 'blue' : 'red'"
      >{{ row.value > 0 ? '+' : '' }} {{ row.value }}</span
    >
  </the-table>
</template>
<script>
import theTable from '@/components/theTable.vue'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '账变类型',
    dataIndex: 'type',
    dataType: 'select',
    searchAble: true,
    search: {
      selectOptions: [
        { title: '商户卖币(人工)', value: '商户卖币(人工)' },
        { title: '商户卖币(接口)', value: '商户卖币(接口)' },
        { title: '商户卖币手续费', value: '商户卖币手续费' },
        { title: '商户卖币扣奖励', value: '商户卖币扣奖励' },
        { title: '人工加币', value: '人工加币' },
        { title: '人工减币', value: '人工减币' },
        // { title: '用户卖币', value: '用户卖币' },
        // { title: '用户卖币被拒', value: '用户卖币被拒' },
        { title: '商户买币', value: '商户买币' },
      ],
    },
  },
  {
    title: '变化值',
    dataIndex: 'value',
    scopedSlots: { customRender: 'balance' },
  },
  {
    title: '变化前',
    dataIndex: 'b4',
  },
  {
    title: '变化后',
    dataIndex: 'after',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    searchAble: true,
    dataType: 'range',
  },
  {
    title: '订单号',
    dataIndex: 'order_id',
  },
]

export default {
  components: { theTable },
  data() {
    return {
      columns,
    }
  },
  created() {
    this.$channel.bind('balance-change', (res) => {
      const user = this.$store.state.account.user
      if (res.uid === user.pid || res.uid === user.id) {
        this.$refs.table.fetch()
      }
    })
  },
  methods: {},
}
</script>

<style>
#balance-table .select {
  width: 32rem;
}
</style>
